<template>
  <scroll-view
    class="maintain-hall-list"
    scroll-y
    @scrolltolower="scroll"
    :refresher-triggered="triggered"
    :refresher-threshold="100"
    @refresherrestore="onRestore"
    refresher-enabled
    @refresherrefresh="onRefresh"
    :ower-threshold="0"
  >
    <view
      class="maintain-hall-list-item"
      :class="'type-' + item.approveStatus"
      v-for="(item, index) in data"
      :key="index"
    >
      <view class="header">
        <view class="item-dt">
          <view class="dt-l">
            <p class="name u-line-1">{{ item.mmoldName }}</p>
            <p class="name u-line-1">{{ item.mmoldCode }}</p>
          </view>
          <text class="dt-r">
            <u-tag type="success" text="待分配" v-if="navIndex == 0"></u-tag>
            <u-tag type="success" text="保养中" v-if="navIndex == 1"></u-tag>
            <u-tag type="success" text="待确认" v-if="navIndex == 2"></u-tag>
            <u-tag type="success" text="已结单" v-if="navIndex == 3"></u-tag>
            <u-tag type="success" text="已过期" v-if="navIndex == 4"></u-tag>
          </text>
        </view>
        <view class="type-list">
          <view class="type-list-item" style="color: red">
            {{
              item.itemLevel == 1
                ? "一级保养"
                : item.itemLevel == 2
                ? "二级保养"
                : "三级保养"
            }}
          </view>
          <!-- <view class="type-list-item" style="color: blue">{{
            item.maintenanceStatus == "10" ? "已升级" : "未升级"
          }}</view> -->
          <!-- 			<view class="type-list-item" style="color: blue">{{ item.affectProductionFlagStr }}模具异常</view>
					<view class="type-list-item" style="color: volcano">{{ item.affectProductionFlagStr }}品质异常</view> -->
          <!-- <view class="type-list-item color0">一级保养</view>
          <view class="type-list-item">日</view>
          <view class="type-list-item">不需要确认</view> -->
        </view>
      </view>

      <view class="main-box">
        <view class="item-dd" v-if="item.taskStatus > 0 && item.taskStatus < 4">
          <text class="label">保养人:</text>
          <text class="value">{{ item.operateName }}</text>
        </view>
        <view class="item-dd">
          <text class="label">计划名称:</text>
          <text class="value">{{ item.servicingPlanName }}</text>
        </view>
        <view class="item-dd">
          <text class="label">保养单号:</text>
          <text class="value">{{ item.servicingNo }}</text>
        </view>
        <view class="item-dd">
          <text class="label">具体位置:</text>
          <text class="value">{{ item.location }}</text>
        </view>
        <view class="item-dd">
          <text class="label">创建时间:</text>
          <text class="value">{{ item.taskCreateTime }}</text>
        </view>
        <view class="item-dd">
          <text class="label">截止时间:</text>
          <text class="value">{{ item.taskPlanEndTime }}</text>
        </view>
      </view>

      <view class="footer-btn">
        <template v-if="navIndex == 0">
          <u-button
            class="btn"
            type="primary"
			v-if="$has('moldMaintainDel')"
            @click="handleDeleteModal(item)"
            text="删除"
          ></u-button>
          <u-button
            class="btn"
            type="primary"
			v-if="$has('moldMaintainDispath')"
            @click="brforeDispath(item)"
            text="分配"
          ></u-button>
          <u-button
            class="btn"
            type="primary"
			v-if="$has('moldMaintainService')"
            @click="service(item, '1')"
            text="接单"
          ></u-button>
        </template>
        <template v-if="navIndex == 1">
          <u-button
            class="btn"
            type="primary"
			v-if="$has('moldMaintainComplete')"
            @click="handleConfirmOrder(item)"
            text="完成保养"
          ></u-button>
        </template>
        <template v-if="navIndex == 2">
          <u-button
            class="btn"
            type="primary"
			v-if="$has('moldMaintainConfirm')"
            @click="handleAccept(item)"
            text="完成确认"
          ></u-button>
        </template>
        <template v-if="navIndex == 4">
          <u-button
            class="btn"
            type="primary"
			v-if="$has('moldMaintainDel')"
            @click="handleDeleteModal(item)"
            text="删除"
          ></u-button>
          <u-button
            class="btn"
            type="primary"
			v-if="$has('moldMaintainDispath')"
            @click="brforeDispath(item)"
            text="分配"
          ></u-button>
          <u-button
            class="btn"
            type="primary"
			v-if="$has('moldMaintainService')"
            @click="service(item, '1')"
            text="接单"
          ></u-button>
        </template>
      </view>
    </view>
    <view class="loading animation-scale-up" v-if="loading"></view>
    <view class="scroll-no-data" v-if="scrollNoData">已拉到最底部</view>
    <MyModal
      v-model="show"
      :title="modalTitle"
      :content="content"
      @confirm="confirm"
      ref="uModal"
      :showCancelButton="true"
      @cancel="cancelModal"
    ></MyModal>
  </scroll-view>
</template>

<script>
import MyModal from "@/components/myModal";
import fetch from "@/utils/fetch";
import { setPageData } from "@/store/user";
import {
  initToken,
  setToken,
  getToken,
  getUserInfo,
  getNotice,
} from "@/store/user.js";
export default {
  components: {
    MyModal,
  },
  props: {
    data: {
      type: Array,
      default: [],
    },
    scrollNoData: {
      type: Boolean,
      default: false,
    },
    navIndex: {
      type: Number,
      default: 0,
    },
  },

  data() {
    return {
      loading: true,
      noData: false,
      userInfo: {},
      triggered: false,
      show: false,
      modalTitle: "",
      content: "",
      selectList: [],
      assisterList: [],
    };
  },
  onReady: async function () {
    this.userInfo = await getUserInfo();
  },
  onPullDownRefresh() {
    uni.stopPullDownRefresh();
  },
  created() {
    const that = this;
    uni.$on("getSelectList", function (data) {
      //接受参数到ID,随意取名
      that.selectId = data; //用此页面的参数来存储
      console.log("that.selectList", that.selectList);
    });
  },
  methods: {
    submit() {},
    handleAccept(order) {
      const that = this;
      setPageData(order);
      uni.navigateTo({
        url:
          "/pages/mold/maintain-hall/accept?id=" +
          order.id +
          "&status=" +
          that.navIndex,
        animationType: "pop-in",
      });
    },
    confirm() {
      const that = this;
      that.show = false;
      that.$loading.open();
      console.log(" this.obj", that.obj);
      fetch("post", that.myUrl, {
        id: that.obj.id,
      }).then((res) => {
        uni.$emit("openToast", {
          type: "success",
          title: "操作成功",
          complete() {
            that.$emit("onRefresh");
          },
        });
      });
    },
    cancelModal() {
      this.show = false;
    },
    setLoading(val) {
      this.loading = val;
    },
    handleDeleteModal(item) {
      const that = this;
      this.deleteShow = true;
      this.$tips("提示", "是否确认刪除？", function (res) {
        if (res.confirm) {
          fetch("post", "/dms/servicingTask/delete", {
            id: item.id,
          }).then((res) => {
            if (res.code === 200) {
              uni.$emit("openToast", {
                type: "success",
                title: "刪除成功",
                complete() {
                  that.deleteShow = false;
                  that.detailId = "";
                  that.$emit("onRefresh");
                },
              });
              // this.getCountsList();
            }
          });
        }
      });
    },
    onRefresh() {
      if (this._freshing) return;
      this._freshing = true;
      this.triggered = true;
      this.$emit("onRefresh");
      setTimeout(() => {
        this.triggered = false;
        this._freshing = false;
      }, 1000);
    },
    brforeDispath(order, status) {
      if (order.taskStatus === 9) {
        this.beforeRevice(order, status);
      } else {
        this.handleDispath(order, status);
      }
    },
    async beforeRevice(order, target) {
      this.handleRecive(order, target);
    },
    //接
    handleRecive(order, deviceMId) {
      const that = this;
      let params = {
        workOrderId: order.id,
        userId: userInfo.userId,
        workOrderStatus: order.workOrderStatus,
        platform: 1,
      };

      if (deviceMId) {
        params["deviceMId"] = deviceMId;
      }
      that.$loading.open();
      fetch("get", "/dms/workOrder/receiveOrDistribution", params)
        .then((res) => {
          uni.$emit("openToast", {
            type: "success",
            title: "操作成功",
            complete() {
              that.$emit("onRefresh");
            },
          });
        })
        .finally(() => {
          // this.$refs.orderDetailModal.show(order.id, '2')
          // const userId = localStorage.getItem('ziyunFactoryUserId')
        });
    },
    //分配
    handleDispath(order, status) {
      uni.navigateTo({
        url: "/pages/staging/production-reporting/operator?multiple=false",
        animationType: "pop-in",
      });
    },
    handleConfirmOrder(order) {
      const that = this;
      setPageData(order);
      uni.removeStorageSync("getSelectLists");
      uni.setStorageSync("getSelectLists", {});
      uni.navigateTo({
        url:
          "/pages/mold/maintain-hall/maintain-completed?id=" +
          order.id +
          "&status=" +
          that.navIndex,
        animationType: "pop-in",
      });
    },
    service(data, status) {
      this.obj = data;
      let url, desc, title;
      if (status == "1") {
        url = "/dms/servicingTask/receive";
        desc = "是否接单请确认!";
        title = "接单提醒";
      }
      this.myUrl = url;
      this.modalTitle = title;
      this.content = desc;
      this.show = true;
    },
    scroll(e) {
      const that = this;
      if (!that.noData) {
        this.loading = true;
        this.$emit("scrollBottom", (val) => {
          that.noData = val;
          setTimeout(() => {
            this.loading = false;
          }, 400);
        });
      }
    },
    onRefresh() {
      if (this._freshing) return;
      this._freshing = true;
      this.triggered = true;
      this.$emit("onRefresh");
      setTimeout(() => {
        this.triggered = false;
        this._freshing = false;
      }, 1000);
    },
    onRestore() {
      this.triggered = "restore"; // 需要重置
    },
    itemClick(item) {
      this.modalTitle = "收货提醒";
      this.content = "确认已收到模具，并开始进行维修！";
      this.show = true;
    },
    ok(val) {
      this.$emit("ok", val);
    },
  },
};
</script>

<style lang="scss" scoped>
.maintain-hall-list {
  height: 100%;
  padding: 0 20rpx;

  .maintain-hall-list-item {
    padding-top: 16rpx;
    background-color: #fff;
    box-shadow: 0rpx 5rpx 13rpx 1rpx #e0e0e0;
    margin-bottom: 20rpx;
    border-radius: 10px;
    overflow: hidden;

    .item-dt {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 27rpx;

      .name {
        font-size: 18px;
      }

      .view {
        color: #83b4ff;
      }
      .dt-l {
        flex: 1;
        margin-right: 10px;
      }
      .dt-r {
        min-width: 70px;
        text-align: center;
        display: flex;
        justify-content: center;
      }
    }

    .type-list {
      display: flex;

      .type-list-item {
        font-size: 14px;
        padding: 3px 10px;
        border: 1px solid #e0e0e0;
        margin-right: 10px;
        border-radius: 5px;
      }

      .color0 {
        background-color: #f7cccc;
        color: red;
      }
    }

    .header {
      padding: 0 30rpx 10px 30rpx;
      border-bottom: 1px solid #e0e0e0;
    }

    .main-box {
      padding: 20rpx 30rpx;
      border-bottom: 1px solid #e0e0e0;

      .item-dd {
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        margin-bottom: 22rpx;

        .label {
          margin-right: 20rpx;
          font-size: 28rpx;
          width: 120rpx;
          min-width: 120rpx;
        }

        .value {
          font-size: 28rpx;
          flex: 1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: #666;
        }

        .btn {
          width: 170rpx;
          min-width: 170rpx;
          margin-left: 29rpx;
          height: 60rpx;
          color: #fff;
          font-size: 24rpx;
        }
      }
    }
  }

  .img-box {
    width: 120rpx;
    margin-bottom: 27rpx;
  }

  .footer-btn {
    display: flex;
    padding: 20rpx;
    align-items: flex-end;
    justify-content: end;

    .btn {
      width: 80px;
      margin: 0;
      height: 32px;
      line-height: 32px;
      margin-right: 10rpx;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .scroll-no-data {
    text-align: center;
  }
}
</style>
